<template>
  <div>
	  <a-card style="margin-bottom: 15px">
		  <a-form name="customized_form_controls" layout="inline" :model="formState" @finish="onFinish" style="float: left">
			  <a-form-item name="name" label="菜单名称">
				  <a-input v-model:value="formState.name" allowClear />
			  </a-form-item>
			  <a-form-item>
				  <a-button type="primary" html-type="submit">搜索</a-button>
			  </a-form-item>
		  </a-form>
		  <div style="float: right">
				  <a-button type="primary" @click="addIndexMenu()">新增</a-button>
		  </div>
	  </a-card>
	  <a-card>
		  <a-table :columns="columns" :data-source="data" :pagination="false" style="height: 650px;overflow-y: auto">
			  <template #bodyCell="{ column, text, record }">
				  <a v-if="column.key === 'operation' && record.id != 1" style="margin-right: 10px" @click="edit(record)">编辑</a>
				  <a-popconfirm
						  v-if="column.key === 'operation' && !record.children && record.id != 1"
						  title="是否确认删除"
						  @confirm="onDelete(record.id)"
					  >
						  <a style="color: red">删除</a>
					  </a-popconfirm>
			  </template>
		  </a-table>

	  </a-card>
	  <a-modal v-model:visible="visible" title="首页菜单" @ok="handleOk">
		  <a-form
			  ref="formRef"
			  name="custom-validation"
			  :model="addFormState"
			  :rules="rules"
			  :labelCol="{span: 5}"
		  >
			  <a-form-item has-feedback label="菜单名称" name="name">
				  <a-input v-model:value="addFormState.name" placeholder="请输入菜单名称" allowClear/>
			  </a-form-item>
			  <a-form-item has-feedback label="菜单编码" name="key">
				  <a-input v-model:value="addFormState.key" placeholder="请输入菜单编码" allowClear />
			  </a-form-item>
			  <a-form-item has-feedback label="父级菜单" name="parentId">
				  <a-select v-model:value="addFormState.parentId" :options="menus" placeholder="请选择父级菜单" allowClear/>
			  </a-form-item>
			  <a-form-item has-feedback label="排序" name="sort" >
				  <a-input-number v-model:value="addFormState.sort" style="width: 100%" placeholder="请输入排序值"/>
			  </a-form-item>
		  </a-form>
	  </a-modal>
  </div>
</template>

<script setup  >
    import menuApi from '@/api/indexMenu/menuApi'
    const columns = [
        {
            title: '菜单名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '菜单编码',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '排序',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '操作',
            key: 'operation',
        },
    ];
    const menus = ref([]);

    const data = ref([]);
    const formState = ref({name: null});
    const visible = ref(false)
	const addFormState = ref({name:null,key:null,sort:null})

    const onFinish = (values) => {
        console.log('Received values from form: ', values);
        getData()
    };
    const formRef = ref()
    const addIndexMenu = () =>{
        visible.value = true
		if(formRef.value){
            formRef.value.clearValidate()
            formRef.value.resetFields()
        }
    }
    const rules = {
        name: [{ required: true,  trigger: 'blur', message: '请输入菜单名称' }],
        key: [{ required: true,  trigger: 'blur', message: '请输入菜单编码' }],
        parentId: [{ required: true,  trigger: 'blur', message: '请选择父级菜单' }],
        sort: [{ required: true,  trigger: 'blur', message: '请输入排序值' }],
    }
    const handleOk = () =>{
        if(addFormState.value.parentId == 0){
            addFormState.value.level = 1
		}else{
            addFormState.value.level = 2
		}
        menuApi.addMenuIndex(addFormState.value).then(res =>{
            visible.value = false
            getData()
        })
	}
	const onDelete = (id) =>{
        menuApi.delMenuIndex({id:id}).then(res =>{
            visible.value = false
            getData()
		})
	}
	const edit = (row) =>{
        addIndexMenu()
        addFormState.value = row
		console.log(addFormState.value)
	}
    const getData = () =>{
        menuApi.getMenuIndex(formState.value).then(res =>{
            let menusData = []
            menusData.push({label: '顶级', value: 0})
            for (let i = 0; i < res.length; i++) {
                res[i].children = res[i].children.length == 0 ? null : res[i].children
                menusData.push({ label: res[i].name, value: res[i].id })
            }
            menus.value = menusData
            data.value = res
        })
	}
    getData()

</script>

<style scoped>

</style>
